<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('角色管理')"></head>
</head>
<body class="auth-user">
<div class="layui-fluid">
    <div class="layui-row larryms-panel auth-user-add" style="overflow: auto">
        <form class="layui-form" id="roleForm">
            <div class="layui-form-item">
                <label for="roleName" class="layui-form-label">
                    <span class="x-red">*</span>角色名称
                </label>
                <div class="layui-input-inline">
                    <input type="hidden" name="roleId" id="roleId" th:value="${role?.roleId}"/>
                    <input type="text" id="roleName" name="roleName" lay-verify="rolename"
                           autocomplete="off" class="layui-input larry-input" th:value="${role?.roleName}"/>
                </div>
                <div id="ms" class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span><span id="ums">角色名称必填</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="roleCode" class="layui-form-label"> 角色编码 </label>
                <div class="layui-input-block">
                    <input type="text" id="roleCode" name="roleCode"
                           autocomplete="off" class="layui-input larry-input" th:value="${role?.roleCode}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="roleDesc" class="layui-form-label"> 角色备注 </label>
                <div class="layui-input-block">
                    <input type="text" id="roleDesc" name="roleDesc"
                           autocomplete="off" class="layui-input larry-input" th:value="${role?.roleDesc}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">权限</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <label for="roleDesc" class="layui-form-label">
                    <span class="x-red">*</span>权限选择
                </label>
                <div class="layui-input-block">
                    <ul id="treePermiss" class="ztree"></ul>
                </div>
            </div>
            <div class="layui-form-item" style="height: 60px;"></div>
            <div th:if="${param.detail == null}">
                <div class="larryms-layer-btn">
                    <a class="layui-btn layui-btn layui-btn-sm left" lay-submit=""
                       lay-filter="add" id="submit" th:attr="data-url=@{/system/role/saveRole}">保存</a>
                    <a class="layui-btn layui-btn layui-btn-sm  layui-btn-danger" id="resetBtn">重置</a>
                    <a class="layui-btn layui-btn layui-btn-sm  layui-btn-primary" id="close">关闭</a>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" th:src="@{/static/larryms/layui/layui.js}"/>
<script type="text/javascript" th:src="@{/static/scripts/common/json2.js}"/>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
var bathPath = /*[[@{/}]]*/ "/";
layui.config({
    version: ui.version,
    layertype:2,
    identified: 'userForm',
    base: bathPath + 'static/larryms/',  //实际使用时，建议改成绝对路径
    rightMenu: "none" // false关闭，设置为custom时使用自定义，不使用默认menu
}).extend({
    larry: 'js/base'
}).use(['larry', 'table', 'custom', 'beoneTree', 'ztree', 'ztreeCheck', 'ztreeExedit'], function () {
    var form = layui.form, layer = layui.layer, $ = layui.$, beoneTree = layui.beoneTree,
            ztree = layui.ztree, ztreeCheck = layui.ztreeCheck, ztreeExedit = layui.ztreeExedit, zNodes = [];
    var setting = {
        check: {enable: true},
        data: {simpleData: {enable: true}, key: {url: "action", icon: ''}}
    };

    $(function () {
        var usedPermissionUrl = /*[[@{/system/permission/all/used}]]*/ "/system/permission/all/used";
        $.ajax({
            url: usedPermissionUrl, async: false, type: 'post', dataType: "json",
            success: function (result) {
                var ownerPermissions = [[${rolePermission}]];
                if (ownerPermissions) {
                    ownerPermissions = JSON.parse(ownerPermissions);
                }
                var array = result.data;
                for (var n in array) {
                    if (ownerPermissions) {
                        for (var j in ownerPermissions) {
                            if (array[n].nodeId == ownerPermissions[j].nodeId) {
                                array[n].checked = true;
                                break;
                            }
                        }
                    }
                    if ("index" == array[n].nodeCode
                            || "sys.console" == array[n].nodeCode
                            || "indexMenuTree" == array[n].nodeCode) {
                        array[n].checked = true;
                    }
                }
                zNodes = beoneTree.createTreeStructureNodes({items: array});
            }
        });
        var treeObj = ztree.init($("#treePermiss"), setting, zNodes);
        treeObj.expandAll(true);
    });
    //自定义验证规则
    form.verify({
        rolename: function (value) {
            if (value.trim() == "") {
                return "角色名不能为空";
            }
        }
    });

    var indexFre = parent.layer.getFrameIndex(window.name);
    $('#close').click(function () {
        parent.layer.close(indexFre);
    });
    $('#resetBtn').on('click', function () {
        $('#roleForm')[0].reset();
    });
    //监听提交
    form.on('submit(add)', function (data) {
        var myTree = ztree.getZTreeObj("treePermiss");
        var jsonArr = myTree.getCheckedNodes(true);
        var permissions = [];
        for (var item in jsonArr) {
            permissions.push(jsonArr[item].id);
        }

        if (permissions.length == 0) {
            beone.toastMsg({content: "请选择角色对应的权限!", icon: 'fail', anim: 'fail'});
            return false;
        }

        data.field.permissions = permissions.join(",");
        var url = /*[[@{/system/role/saveRole}]]*/ "/system/role/saveRole";
        $.post(url, data.field, function (res) {
            if (res.code == "success") {
                larryms.msg(res.desc);
                parent.table.reload('roleList', {});
                parent.layer.close(indexFre);
            }
        });
        return false;
    });

    form.render();
});

/*]]>*/</script>
</body>
</html>